<template>
  <div>
    <el-form>
      <el-form-item label="条件组">
        <div style="display: flex; justify-content: space-between; width: 100%">
          <div>
            <el-button type="primary" @click="handleAddGroup" size="small"
              >新增</el-button
            >
          </div>
          <div>
            <el-text>条件组关系</el-text>
          </div>
          <div>
            <el-switch
              v-model="_value.groupType"
              active-value="0"
              inactive-value="1"
              inactive-text="或"
              active-text="且"
            />
          </div>
        </div>
      </el-form-item>
      <el-table
        :data="_value.groups"
        border
        stripe
        :height="200"
        ref="groupTableRef"
        @row-click="handleGroupRowClick"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="组内条件关系" prop="groupItemType">
          <template #default="scope">
            <el-switch
              v-model="scope.row.groupItemType"
              active-value="0"
              inactive-value="1"
              inactive-text="或"
              active-text="且"
            />
          </template>
        </el-table-column>
        <el-table-column label="组内条件数量" prop="groupItemCount">
          <template #default="scope">
            {{ scope.row.conditions.length }}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="90">
          <template #default="scope">
            <el-button
              size="small"
              type="danger"
              @click="handleDeleteGroup(scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item label="组内条件">
        <el-button type="primary" @click="handleGroupItemAdd" size="small"
          >新增</el-button
        >
      </el-form-item>
      <el-table :data="group.conditions" border stripe :height="200">
        <el-table-column label="条件类型" prop="itemType">
          <template #default="scope">
            <el-radio-group v-model="scope.row.itemType">
              <el-radio
                v-for="(item, index) in DIC_PROP.VAL_TYPE.slice(0, 3)"
                disabled
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="140">
          <template #default="scope">
            <el-button
              size="small"
              type="warning"
              @click="handleGroupItemEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleGroupItemDelete(scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <RuleGroupItem
        ref="groupItemRef"
        v-if="groupItemVisiable"
        :formItemList="props.formItemList"
        @confirm="handleGroupItemConfirm"
      ></RuleGroupItem>
    </el-form>
    <div style="display: flex; justify-content: center">
      <el-button
        type="primary"
        @click="handlSaveRule"
        round
        style="width: 200px; margin-top: 10px; margin-bottom: 10px"
        >保存条件</el-button
      >
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useMessage } from "@/hooks/message";
import RuleGroupItem from "./RuleGroupItem.vue";
import { getRandNodeId } from "@/utils/process";
import type { Rule, RuleGroup } from "../../ProcessNodes";
import type { FormItemPerm } from "@/views/design/form/FormComponentMixin";
import { DIC_PROP } from "@/views/design/process/Dict";

const _value: any = defineModel<Rule>();
const groupItemRef = ref(null);
const groupTableRef = ref(null);
const groupItemVisiable = ref(false);
const group = reactive<RuleGroup>({
  code: "",
  groupItemType: "0",
  conditions: []
});

const emits = defineEmits(["confirm"]);

const props = defineProps({
  formItemList: {
    type: Array as PropType<FormItemPerm[]>,
    default: [] as any[]
  }
});

const handleAddGroup = () => {
  group.code = getRandNodeId();
  group.groupItemType = "0";
  group.conditions = [];
  _value.value.groups.push(group);
};

const handleDeleteGroup = (index: number) => {
  _value.value.groups.splice(index, 1);
};

const handleGroupRowClick = row => {
  groupTableRef.value.clearSelection();
  groupTableRef.value.toggleRowSelection(row);
  group.code = row.code;
  group.groupItemType = row.groupItemType;
  group.conditions = row.conditions;
};

const handleGroupItemAdd = () => {
  if (group && group.code) {
    groupItemVisiable.value = true;
    nextTick(() => {
      groupItemRef.value.reset();
    });
  } else {
    useMessage().warning("请先添加条件组或者选择已有的条件组");
  }
};

const handleGroupItemEdit = row => {
  groupItemVisiable.value = true;
  nextTick(() => {
    console.log("group item", row);
    groupItemRef.value.show(row);
  });
};

const handleGroupItemConfirm = item => {
  const itemIndex = group.conditions.findIndex(v => {
    if (v.itemType === "0") {
      return v.varKey === item.varKey && v.varOperator === item.varOperator;
    } else if (v.itemType === "1") {
      return v.dynamicExpression === item.dynamicExpression;
    } else if (v.itemType === "2") {
      return v.dynamicFunctionId === item.dynamicFunctionId;
    } else {
      return false;
    }
  });
  if (itemIndex != -1) {
    group.conditions[itemIndex] = item;
  } else {
    group.conditions.push(item);
  }
  groupItemVisiable.value = false;
};

const handleGroupItemDelete = (index: number) => {
  group.conditions.splice(index, 1);
};

const handlSaveRule = () => {
  group.conditions = [];
  emits("confirm", _value.value);
};
</script>
